<template>
    <div class="container">
        <el-button type="primary" size="small" @click="handleReturn" style="margin-left:1100px;margin-bottom:10px">返回
        </el-button>
        <el-card class="box-card">
            <el-descriptions title="订单信息">
                <el-descriptions-item label="订单类型">{{ form.orderType }}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{ form.payMoney }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    <el-tag size="small" :type="form.completed === '未完成' ? 'danger' : ''" effect="plain">
                        {{form.status ==='已帮助'&&form.completed==="未完成"?'帮助中...':(form.status
                        ==='待帮助'&&form.completed==="未完成"?'待帮助':(form.status
                        ==='已帮助'&&form.completed==="已完成"?'已被成功帮助':'待帮助'))}}
                    </el-tag>
                    <el-button type="primary" size="small" style="margin-left:100px;margin-top:-5px;"
                        @click="handleEditStatus">修改状态
                    </el-button>
                </el-descriptions-item>
                <el-descriptions-item label="起点" v-if="form.startAddress">{{ form.startAddress }}
                </el-descriptions-item>
                <el-descriptions-item label="目的地">{{ form.endAddress }}</el-descriptions-item>
                <template v-for="(item,index) in orderInfo">
                    <el-descriptions-item v-if="item.key === '图片'" :label="item.key" :key="index">
                        <el-image style="width: 30px; height: 30px" :src="item.value" :preview-src-list="[item.value]">
                        </el-image>
                    </el-descriptions-item>
                    <el-descriptions-item v-else-if="item.key === '打印附件'" :label="item.key" :key="item.key">
                        <el-link type="primary" v-for="(file,i) in item.value" :key="file" :href="file" target="_blank">
                            附件{{ i + 1 }}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item v-else :label="item.key" :key="item">{{ item.value }}</el-descriptions-item>
                </template>
            </el-descriptions>
        </el-card>
        <div class="personInfo">
            <el-card class="box-card">
                <el-descriptions class="margin-top" title="发单人" :column="2" border>
                    <el-descriptions-item>
                        <template slot="label"> <i class="el-icon-user"></i> 昵称 </template> {{
                        form.userInfo?form.userInfo.nickName:'' }}
                    </el-descriptions-item>
                    <el-descriptions-item> <template slot="label"> <i class="el-icon-mobile-phone"></i> 手机号 </template>
                        {{ form.userInfo?(form.userInfo.phone?form.userInfo.phone:'未填写手机号'):'未填写手机号' }}
                    </el-descriptions-item>
                    <el-descriptions-item> <template slot="label"> <i class="el-icon-location-outline"></i> 发单时间
                        </template> {{ form.publicTime }} </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card class="box-card">
                <el-descriptions class="margin-top" title="接单人" :column="2" border
                    v-if="form.acceptMan&&form.status==='已帮助'"> <template>
                        <el-descriptions-item> <template slot="label"> <i class="el-icon-user"></i> 昵称 </template> {{
                        form.acceptManInfo[0].nickName }} </el-descriptions-item>
                        <el-descriptions-item> <template slot="label"> <i class="el-icon-mobile-phone"></i> 手机号
                            </template> {{ form.acceptManInfo[0].phone?form.acceptManInfo[0].phone:'未填写手 机号' }}
                        </el-descriptions-item>
                        <el-descriptions-item> <template slot="label"> <i class="el-icon-location-outline"></i> 发单时间
                            </template> {{ form.acceptTime }} </el-descriptions-item>
                    </template> </el-descriptions>
                <div style="margin-top:50px;color:#c8c8c8;" v-else> 暂时无人接单 </div>
            </el-card>
        </div>
        <el-dialog title="修改订单状态" :visible.sync="dialogVisible" width="30%">
            <el-select v-model="value" placeholder="接单状态">
                <el-option v-for="item in optionsSend" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="completed" placeholder="用户完成状态">
                <el-option v-for="item in optionsPathch" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateStatus">确 定</el-button>
            </span>

        </el-dialog>
    </div>
</template>

<script>
import { formatOrderInfo } from '@/utils/Format'
export default {
    data() {
        return {
            form: {},
            orderInfo: '',
            _id: '',
            dialogVisible: false,
            optionsSend: [
                {
                    value: '待帮助',
                    label: '待帮助'
                },
                {
                    value: '已帮助',
                    lable: '已帮助'
                },
            ],
            optionsPathch: [
                {
                    value: '未完成',
                    label: '未完成'
                },
                {
                    value: '已完成',
                    lable: '已完成'
                },
            ],
            value: '',
            completed: ''
        }
    },
    created() {
        const { _id } = this.$route.params
        this._id = _id
        this.getOrderDetail(_id)
    },
    methods: {
        handleEditStatus() {
            const { role } = JSON.parse(localStorage.getItem('admin'))
            if (role !== '超级管理员') {
                this.$message.error('对不起，您没有权限！')
                return
            }
            this.dialogVisible = true
        },
        handleReturn() {
            this.$router.push('/order')
        },
        getOrderDetail(id) {
            this.$http.get('/orderDetail',
                {
                    params: { id }
                }).then(res => {
                    // console.log(res)
                    if (res.data.status === 'success') {
                        this.form = res.data.result[0]
                        this.orderInfo = formatOrderInfo(res.data.result[0])
                    }
                    else {
                        this.$message.error('读取错误');
                        this.$router.push({ name: 'order' })
                    }
                }).catch(err => {
                    this.$message.error('读取错误');
                    this.$router.push({ name: 'order' })
                })
        },
        updateStatus() {
            //判断是否选择订单状态value
            if (this.value && this.completed) {
                // console.log(this.complated, this.value)
                this.dialogVisible = false
                this.$http.post('/updateOrder', {
                    id: this._id, status: this.value, completed: this.completed, isCompleted: this.value === '已帮助' && this.completed === '未完成' ? true : false
                }).then(res => {
                    if (res.data == 'success') {
                        this.$message.success('修改成功')
                        this.getOrderDetail(this._id)
                    } else { this.$message.error('服务器错误') }
                }).catch(err => {
                    console.log(error)
                    this.$message.error('服务器错误')
                })
            } else { this.$message.error('请选择订单状态') }
        }
    }
}
</script>

<style lang="scss" scoped>
.el-tag--small {
    position: absolute;
}

.container {
    background-color: #fff;
    padding: 10px;

    .personInfo {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;

        .box-card {
            width: 49%;
        }
    }
}
</style>
